//行业分类
import React, { Component } from 'react'
import {
  View,
  Text,
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView,
  ListView,
  Alert
} from 'react-native';

import { SelFieldTypeAction } from '../../actions/systemAction';      //加载action
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { public_Style as styles } from '../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import State_t from './state'
import Tradelist from './tradelist'

import trade from './Trade.json';

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => { r1 !== r2 } });//listView 数据判断方式
class Trade extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: [],
      a: '',
      reload: 0,
    }
  };

  //加载后渲染页面
  componentDidMount() {
    const { actions } = this.props;
    actions.SelFieldTypeAction({ type: this.props.navigation.state.params.Type }); //初始化查询
    if (this.props.navigation.state.params.list) {
      if (!this.state.fields[0] && this.props.navigation.state.params.list[0]) {
        const aa = this.props.navigation.state.params.list
        var fields = [];
        for (j = 0; j < aa.length; j++) {
          if (this.props.navigation.state.params.Type == aa[j].fieldType) {
            fields.push(aa[j]);
          }
        }
        this.setState({ fields: fields });
      }
    }
  }

  //设置render
  render() {
    //获取用户列表数据及是否等待状态
    const { fieldList, isloading } = this.props.fields.data;
    //创建listView数据源
    const dataSource = ds.cloneWithRows(fieldList);
    return (
      <View style={{ backgroundColor: "#ffffff" }}>
        <View style={[styles.rtopin, {
          width: width * 1,
          elevation: 5,
          shadowColor: 'black',
          shadowOpacity: 1,
          shadowRadius: 5
        }]}>

          <TouchableOpacity activeOpacity={1} style={styles.rtopicon1} onPress={() => { this.props.navigation.goBack() }}>
            <Icon
              name={'ios-arrow-back'}
              size={25}
              color={'#ffffff'} />
          </TouchableOpacity>
          <Text style={styles.rtoptext}>选择行业</Text>
          <TouchableOpacity style={styles.rtoptext2out} onPress={() => {
            const a = this.state.fields;
            this.props.navigation.state.params.rollback(a, this.props.navigation.state.params.Type);
            this.props.navigation.goBack();
          }}>
            <Text style={styles.rtoptext2} >保存</Text>
          </TouchableOpacity>
        </View >

        <Tradelist
          fields={this.state.fields}
          deleHY={this.deleHY.bind(this)}
        />

        <ListView
          dataSource={dataSource}
          renderRow={this.renderRow.bind(this)}                 // 遍历数组的回调函数
          contentContainerStyle={[styles.list, { width: width * 1 }]}
          enableEmptySections={true}
        />
      </View>
    );
  }

  renderRow(rowData, rowID) {
    return (
      <State_t
        function={this.resumeWorkinglife.bind(this)}
        rowData={rowData}
      />
    )
  }

  resumeWorkinglife(name) {
    //取得子组件返回的值

    //重新设置父组件的state

    // var fields = [];
    var count = 0;
    for (j = 0; j < this.state.fields.length; j++) {
      if (name.fieldId == this.state.fields[j].fieldId) {
        count = 1;
      }
    }
    if (count == 0) {
      this.state.fields.push(name);
    }
    this.setState({ reload: this.state.reload++ });
  }

  deleHY(id) {
    //取得子组件返回的值
    //重新设置父组件的state
    var count;
    for (j = 0; j < this.state.fields.length; j++) {
      if (id == this.state.fields[j].fieldId) {
        count = j;
      }
    }
    this.state.fields.splice(count, 1);
    this.setState({ reload: this.state.reload++ });
  }

}

//组合action
var actions = {
  SelFieldTypeAction,
}
//连接state到props
const mapStateToProps = state => {
  return {
    fields: state.SelFieldTypeReducer             //自己的reducers
  }
}
//连接action
const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
  mapStateToProps, mapDispatchToProps
)(Trade);